<template>
  <div class="container">
    <el-dialog
      title="预览文章"
      :visible="showPreviewDialog"
      width="70%"
      @close="onClose"
    >
      <h2>{{ data.title }}</h2>
      <div class="author">
        <div class="time">
          {{ updatetime(data.createTime) }}
        </div>
        <div class="author">超级管理员</div>
        <div class="look">
          <i class="el-icon-view"></i>
          {{ data.visits }}
        </div>
      </div>
      <div v-html="data.articleBody" class="content"></div>
    </el-dialog>
  </div>
</template>

<script>
import { detail } from "@/api/hmmm/articles";
import { parseTime, html2Text } from "@/utils/index";
export default {
  inheritAttrs: false,
  props: {
    showPreviewDialog: {
      type: Boolean,
      default: false,
    },
    id: {
      type: Number,
    },
  },
  data() {
    return {
      data: {},
    };
  },
  methods: {
    onClose() {
      this.$emit("update:showPreviewDialog", false);
    },
    updatetime(time2) {
      const time = parseTime(time2);
      return time;
    },
  },
  async mounted() {
    const data1 = {
      id: this.id,
    };
    const { data } = await detail(data1);
    this.data = data;
  },
};
</script>

<style scoped lang='less'>
.author {
  display: flex;
  > div {
    padding-right: 10px;
  }
}
.content {
  margin-top: 15px;
  background-color: rgb(245, 245, 245);
  padding: 10px;
}
</style>
